<template>
	<view>

		<view class="content">
			<pickerAddress @change="change">{{currentCity.join(',')}}：共{{total}}家洗车行</pickerAddress>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- <view class="title">— 猜你喜欢 —</view> -->
			<view class="product-list">
				<!-- <view class="product" v-for="( product, index ) in addresses" :key="index" @tap="toGoods(product)" v-if="product.tel!==''"> -->
				<view class="product" v-for="( product, index ) in addresses" :key="index" @tap="toGoods(product)">
					<image mode="widthFix" :src="product.photos.length?product.photos[0].url:''"></image>
					<view class="name">{{product.name}}</view>
					<view class="info">
						<view class="address">{{product.address}}</view>
						<view @tap="makeCall(product.tel)"  class="slogan">{{product.tel}}</view>
						
						<!-- <view v-else>
							<view v-for="(item, index2) in product.tel" @tap="makeCall(item)"  class="slogan">{{"world"}}{{item}}</view>
						</view> -->
					</view>
					
					<!-- <view @tap="addOrder(product)"  class="add">+</view> -->
				</view>
			</view>
			<!-- <view class="loading-text">{{loadingText}}</view> -->
		</view>
	</view>
</template>
<script>
import {
	mapState, 
	mapGetters,
	mapMutations,
	mapActions
} from 'vuex'
import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
export default {
	components:{
		pickerAddress
	},
	data() {
		return {
			txt: '选择地址',
			title: 'Hello',
			currentCity: ['吉林省','吉林市','船营区'],
			
			
			categoryHeight: '80px',
			currentPageindex: 0,
			headerPosition:"fixed",
			loadingText:"正在加载...",
			param:{
				keywords:'洗车行',
				city:'',
				// output:'',
				offset:20,
				page:1,
				key:'59d0debff8715f3fb1e4bd02948bc1e7',
				extensions:'all'
			}
			
		};
	},
	computed: {
		...mapGetters(["total","addresses","banners","notices","products_a","products_b","products_c","category"])
	},
	onReady() {
		
	}, 
	onPageScroll(e){
		//兼容iOS端下拉时顶部漂移
		if(e.scrollTop>=0){
			this.headerPosition = "fixed";
		}else{
			this.headerPosition = "absolute";
		}
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom(){

		if(this.total===this.addresses.length){
			this.loadingText="到底了";
			return false;
		}else{
			Object.assign(this.param,{page:++this.param.page})
			this.getAddress(this.param);
		}
		
	},
	onNavigationBarButtonTap(e) {
		console.log(JSON.stringify(e));
		uni.navigateTo({
			url: '/pages/my/message'
		});
	},
	onLoad() {
		// this.getBanners();
		// this.getNotices({page: 1,per_page: 10});
		// this.getProducts();
		// this.getCategory({page: 1, per_page: 999});
		this.change({data:this.currentCity})
	},
	methods: {
		...mapActions(['getAddress','getBanners','getNotices','getProducts','getCategory']),
		//选择地址
		change(data) {
			// let param = {};
			// this.txt = data.data.join('')+"：共"+this.total+"家洗车行";
			// console.log(data.data)
			Object.assign(this.param,{page:1,city:data.data[2]});
			this.currentCity = data.data;
			this.getAddress(this.param);
		},

		addOrder(product) {
			console.log(product)
		},
		
		//搜索跳转
		toSearch(){
			// uni.showToast({title: "建议跳转到新页面做搜索功能"});
		},
		//轮播图跳转
		toSwiper(e){
			// uni.showToast({title: e.src});
		},
		//分类跳转
		toCategory(path){
			uni.navigateTo({
				url: '/pages/my/'+path
			})
			// uni.showToast({title: e.title});
		},
		//推荐商品跳转
		toPick(e){
			// uni.showToast({title: 'hello world'});
		},
		//商品跳转
		toGoods(item){
			// uni.navigateTo({
			// 	url: '/pages/detail/detail?id='+item.id
			// });
		},
		makeCall(num){
			uni.makePhoneCall({phoneNumber: num})
		},
		//更新分类指示器
		categoryChange(event) {
			this.currentPageindex = event.detail.current;
		},
		//分类图片加载完毕
		categoryImgLoad(e){
			this.categoryImg = this.categoryImg?this.categoryImg+1:1;
			//完成加载11个分类图片开始计算分类高度，若分类图片不足10个则修改此处的10。
			if(this.categoryImg==10){
				this.getCategoryHeight();
			}
		},
		//更新分类高度
		getCategoryHeight() {
			let view = uni.createSelectorQuery().select('.category-list');
			view.fields(
				{
					size: true
				},
				data => {
					this.categoryHeight = data.height + 'px';
				}
			).exec();
		}
	}
};
</script>
<style lang="scss">
@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP8AAsAAAAACFwAAAOwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEEINSATYCJAMQCwoABCAFhG0HTxtLBxHVmzvJfhS4scOeC1v4zNNRK/hO5b0IHqg/8838ye5XsIDanmAkhZ1NSZygm4SsbYYkp17ICsOUxIP/ZZm9xejtQAD8zzX10geY387mEtXapUd7A5xF6oAi2pJoE8YNY1dexGkIwCSZQoiq1es2RUdhTBKA6N2jWwf0lAlVky3QEYSUrFSIOTjQ5VR5GZjt/168obDQQeLQMGY27FqtMxWf5z5fpgWCgdYugng8B8DWgQYUAhSI7qWujmhhqBAaptJfURzQ0ZEwVkfB58uCQSTZi0o3//JAItBAhGBk2gAURUrtxMQ2BQnPC1IQ8HyZmpvE1XgdMIDtwHVEJt4qkThsZwFPVHiEFTHKtWBBYGGUe/HmsZu6TluCStw+fXGMY9GyUb4b133Xrze9etV77VqzxcuXbYq8bF6/7rtxo5lY6A1cLcuCQJS3oXHswOYKUSaI71xkXr3ayZy2SIix0YumRS6AwEnLmr58WS9z2pKlYcJCCGzcXOU81Xuhp1osIWbBiUQWehda7lTvaNeCJX0WbYgksMA0hdlLo6zDp1PEomIdVu7YE4wN7nH7uGPdHXz2R3uHnX68tcP6SPE5ZSdObNpN/9dybtfmr6tHoy6+rN+DqdvnW9lUbkHTdcUWfKp1yzVr5Ag5HCqGU0Hca3jpAt2GiWFRwxYvdpYFo2b3tN/HvLeFd+BAr5Bu7CXnzKFlJb8dtP3ucx1djc+589Pep+W7X706stfvml+7i8fsWunxp7/f/uzsrgzj9Sv3p+6T7yqwvrfdy3nk/J6eZ84fnHp2lSvf/m/7H7569dDvuY/fTX+Mwdog+QVAGyB/IHmGyK8/exQrX13Maucu+y23rrbi5tQ1T3yTor3oj4kV8a8VtyxSqtQwKyXLbJF2kaI5DgAkYGICPzQG4dwfQxPVOhMEOlExSEJJAg2dTFSRhcCBRVEIQacCmBSkxnqLCAaiIZQBFGAiAIGH3SBxcRo0PFxBFXkPHETzDkLwCA1MfCJiR4tswStWxeEccIPlAbXSxS1rYEH2G0U8ZpeU+sw/Oq+80JR1NjrghW6MOT6JNgQO3NEJPTgPj4PAONK4hlKGYLqq4mVvKlc6M0YVh3PADZYH1EoXd8sHlvv+G0U8ZldDq/D+0XnVPTRl3QIdVFcr2rX090m0IXA8jjs6oYcOPMwQgSkfpnENpewRMF2FSvG2qnJ+zfmE6wATY6YSUmhCCQehg9V8advwun0+nHuJ0VP0kYrcz/Qox5hl') format('woff2');}
.content {
	// position: sticky;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	z-index: 1;
	position: fixed;
	bottom: 30rpx;
	height: 100rpx;
	width: 750rpx;
	font-size:30rpx;
	color: #fff;
	line-height:100rpx;
	text-align: center;
	background-color: #FF80AB;
	border-radius: 50rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icon {
	font-family:"HMfont-home" !important;
	font-size:60upx;
	font-style:normal;
	color:#ffffff;
	&.scan {
		&:before{content:"\e69a";}
	}
	&.menu {
		&:before{content:"\e62b";}
	}
	&.search {
		&:before{content:"\e628";}
	}
}
page {
	background-color: #fff;
}

.place{
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
	background-color: #FF80AB
;
	height: 100upx;
}



.banner{
	image{
		width: 100%;
	}
}
.msg{
	padding: 10upx;
}
.goods-list{
	
	padding-top: 10upx;
	// background-color: #FF80AB
;
	.title{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.loading-text{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list{
		width: 95%;
		padding: 0 2.5% 2.5vw 2.5%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product{
			width: 48.75%;
			border-radius: 20upx;
			border: 1rpx solid #FF80AB;
			background-color: #fff;
			margin: 0 0 15upx 0;
			position: relative;
			image{
				width: 100%;
				border-radius: 20upx 20upx 0 0;
			}
			.name{
				width: 92%;
				padding: 2rpx 4% 2rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}
			.info{
				// display: flex;
				// justify-content: space-between;
				// align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;
				
				.price{
					color: #FF80AB
;
					font-size: 30upx;
					font-weight: 600;
				}
				.slogan{
					color: #FF80AB;
					font-size: 40rpx;
				}
				.address{
					color: #807c87;
					font-size: 24rpx;
				}
				

			}
			.add{
				width: 50rpx;
				height: 50rpx;
				border: 1rpx solid #FF80AB;
				border-radius: 50rpx;
				padding: 10rpx;
				color: #FF80AB;
				font-size: 40rpx;
				line-height: 50rpx;
				text-align: center;
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
			}
		}
		
	}
}
.uni-swiper-msg{
	padding-left: 10upx;
}
</style>
